<template>
  <el-card>
    <el-form ref="attrForm" :model="attr" :rules="rules">
      <el-form-item label="属性名" label-width="70px" prop="attrName">
        <el-input v-model="attr.attrName" placeholder="请输入属性名" style="width:400px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" :disabled="!attr.attrName" @click="addAttrValue">添加属性值</el-button>
      </el-form-item>
      <el-form-item prop="attrValueList">
        <el-table :data="attr.attrValueList" border style="margin-top:20px">
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column label="属性值名称">
            <template v-slot="{row,$index}">
              <el-input :ref="$index" v-model="row.valueName" placeholder="请输入详细属性值" size="mini" @blur="isDleAttrValue(row,$index)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="">
            <template v-slot="{ $index }">
              <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="真的要删除这个属性值吗" @onConfirm="deleteCurrentAttrValue($index)">
                <el-tooltip slot="reference" content="删除属性值" placement="top">
                  <el-button type="danger" icon="el-icon-delete" size="mini" />
                </el-tooltip>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm">确定</el-button>
    <el-button type="default" @click="$emit('setIsShowAttrList',true)">取消</el-button>
  </el-card>
</template>

<script>
import { reqSaveAttrInfo } from '@/api/product/attr'
import { mapState } from 'vuex'
export default {
  name: 'SaveAttr',
  props: {
    attrValue: {
      type: Object,
      default: () => ({
        attrName: '',
        attrValueList: []
      })
    }
  },
  data() {
    // const validateAttrValueList = (rule, value, callback) => {
    //   if (!value.length) {
    //     callback(new Error('属性不能为空，请至少添加一个属性'))
    //     return
    //   }
    //   callback()
    // }
    return {
      // attr: {
      //   attrName: '',
      //   attrValueList: [],
      //   valueName: ''
      // },
      attr: this.attrValue,
      rules: {
        attrName: [{ required: true, message: '属性名不能为空', trigger: 'blur' }]
        // attrValueList: [
        //   {
        //     required: true,
        //     validator: validateAttrValueList
        //   }
        // ]
      }
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  methods: {
    // 添加属性
    addAttrValue() {
      this.attr.attrValueList.push({
        valueName: ''
      })
      this.$nextTick(() => {
        this.$refs[this.attr.attrValueList.length - 1].focus()
      })
    },

    // 失去焦点删除空属性
    isDleAttrValue(row, index) {
      if (!row.valueName) {
        this.attr.attrValueList.splice(index, 1)
        // this.attr.attrValueList.pop()
      }
    },
    // 确定按钮，验证添加属性
    submitForm(formName) {
      this.$refs.attrForm.validate(async valid => {
        if (valid) {
          if (!this.attr.attrValueList.length) {
            this.$message.error('请至少添加一个属性...')
            return
          }
          const { attrName, attrValueList, id } = this.attr
          const result = await reqSaveAttrInfo({
            attrName,
            attrValueList,
            categoryId: this.category3Id,
            categoryLevel: 3,
            id
          })
          if (result.code === 200) {
            this.$message.success(`${id ? '修改' : '添加'}属性成功`)
            this.$emit('setIsShowAttrList', true)
          }
        } else {
          console.log('error submit')
          return false
        }
      })
    },
    // 删除属性值
    deleteCurrentAttrValue(index) {
      this.attr.attrValueList.splice(index, 1)
    }
  }
}
</script>

<style>
</style>
